$(() => {

    // jQuery有一个load方法可以加载其他文件中的内容 通常我们用来加载HTML
    $("#header").load('./template/header.html')

    // 获取元素

    let $list = $("#list");
    let $prevPage = $("#prevPage")
    let $nextPage = $("#nextPage")
    var $an =$("#an")
    var $inval=$("#suo")
    let arr1=[];
    
    $an.click(function(){
       
        console.log($inval.val())  
        // console.log(1)
    $.get("/lession05/getAllData",(data)=>{
        // console.log(1)
        // console.log(data.data)
        arr1=[];
        data.data.forEach((val)=>{
            let follow=val.goods_name.includes($inval.val());
            if(follow){
                arr1.push(val);
            }
        })
        console.log(arr1)

        if (!data.error) {
            // 清空之前的数据
            $list.empty();
            // 数据请求回来了 
            arr1.forEach((val,idx) => {
                // console.log(data.data[idx])
                $list.append(`
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 list-item">
                    <div class="card">
                        <a href="./detail.html?id=${val.goods_id}"><img src="${val.goods_small_logo}" class="card-img-top" alt="..."></a>
                    <div class="card-body">
                        <h5 class="card-title">￥${val.goods_price}</h5>
                        <p class="card-text "><a href="./detail.html?id=${val.goods_id}" title="${val.goods_name}">${val.goods_name}</a></p>
                        <div class="row">
                        <div class="col-8">月销${val.add_time}  </div>
                        <a href="#" class="btn col-4 join-cart" data-id="${val.goods_id}">
                         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"  fill="currentColor" class="bi bi-minecart" viewBox="0 0 16 16">
                        <path d="M4 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM.115 3.18A.5.5 0 0 1 .5 3h15a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 14 12H2a.5.5 0 0 1-.491-.408l-1.5-8a.5.5 0 0 1 .106-.411zm.987.82 1.313 7h11.17l1.313-7H1.102z"/>
                      </svg></a>
                      </div>
                    </div>
                    </div>
                </div>
                `)
            })
        }

    })
                         })

    // 发送请求 渲染数据
    // 发送请求如果请求的是全部的数据 那么1 返回的数据时间很长 2 用户不会一次性把这么多数据全部看完 3 页面放不下 
    // $.get("/lession05/getAllData", (data) => {
    //     console.log(data)
    // })
    // 所以改为发送请求部分数据 比如20条 30条 40条等 做一个分页效果

    // 因为发送请求要在好几个地方用到 所以封装成一个函数
    function getPage(page) {
        $.get("/lession05/getList", { page, count: 36 }, function (data) {
            // console.log(data.data[2])
            if (!data.error) {
                // 清空之前的数据
                $list.empty();
                // 数据请求回来了 
                data.data.forEach((val,idx) => {
                    // console.log(data.data[idx])
                    $list.append(`
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 list-item">
                        <div class="card">
                            <a href="./detail.html?id=${val.goods_id}"><img src="${val.goods_small_logo}" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                            <h5 class="card-title">￥${val.goods_price}</h5>
                            <p class="card-text "><a href="./detail.html?id=${val.goods_id}" title="${val.goods_name}">${val.goods_name}</a></p>
                            <div class="row">
                            <div class="col-8">月销${val.add_time}  </div>
                            <a href="#" class="btn col-4 join-cart" data-id="${val.goods_id}">
                             <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"  fill="currentColor" class="bi bi-minecart" viewBox="0 0 16 16">
                            <path d="M4 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM.115 3.18A.5.5 0 0 1 .5 3h15a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 14 12H2a.5.5 0 0 1-.491-.408l-1.5-8a.5.5 0 0 1 .106-.411zm.987.82 1.313 7h11.17l1.313-7H1.102z"/>
                          </svg></a>
                          </div>
                        </div>
                        </div>
                    </div>
                    `)
                })
            }
        })
    }
    var page = 0;
    // 请求第一页的数据
    getPage(page);
    // 此时就要replaceState
    history.replaceState(page, "", "/pages/list.html#" + page);


    // 上一页的点击事件
    $prevPage.click(function () {
        
        if (page < 1) {
            // 已经是第一页的数据
            pxmu.fail("已经是第一页的数据了")
           
            return;
        }
        page--;
        history.pushState(page, "", "/pages/list.html#" + page) // 这里第三个参数是故意写成这个样子的 为了防止刷新 
        // 调用getPage发送请求获取数据渲染页面
        getPage(page)
    })

    // 下一页的点击事件
    $nextPage.click(function () {
        page++;
        history.pushState(page, "", "/pages/list.html#" + page) // 这里第三个参数是故意写成这个样子的 为了防止刷新 
        getPage(page)
    })



    // 分析：现在遇到 问题是ajax是悄悄地发起请求 去服务器获取数据 回来改变页面 
    // 在这种分页的场景下，当用户点击后退的时候其实是想要看上一页的数据 而不是回到登录页面 
    // 因为ajax没有影响历史记录 所以一点击后退按钮 就回到了登录页面
    // 解决方案：让ajax在执行的时候我们附带做一个能够影响历史记录的行为 
    // 在HTML5中 history对象增加了两个方法 pushState replaceState 
    // 这两个方法就可以影响历史记录
    // 虽然pushState和replaceState可以影响历史记录 但是还没有和ajax配合起来 因为这俩只影响历史记录 所以我们希望在后退的时候或者前进的时候 发送请求对应的页面数据信息 再重新渲染即可
    // 监听用户前进后退（虚拟）历史记录的行为
    window.onpopstate = function (e) {
        getPage(e.state)
    }


    // 加入到购物车
    // 当点击加入到购物车按钮的时候 把当前商品的信息加入到购物车
    // 给加入购物车按钮添加点击事件
    $list.on("click", ".join-cart", function(e) {
        console.log(this)
        // 获取当前商品id
        var id = $(this).attr("data-id");
        console.log(id)
    //    发送请求将当前商品信息id提交给服务器
        $.ajax({
            url: "/lession05/addToCart",
            data: {
                id
            },
            type: "get",
            dataType: 'json',
            success(data) {
                if (!data.error) {
                    pxmu.success(data.message)
                } else {
                    pxmu.fail(data.message)
                }
            }
        })
       

        e.preventDefault();



    })
});

